<template>
  <a-modal
    title="用户信息查看"
    width="800px"
    centered
    :visible="userDetailVisible"
    :maskClosable="false"
    @cancel="close"
    :footer="null"
    class="userdetail"
  >
    <a-row :gutter="15">
      <a-col :span="12">
        <div class="user-product-content">
            <a-descriptions bordered :column="1">
            <a-descriptions-item label="用户名">{{form.loginName}}</a-descriptions-item>
            <a-descriptions-item label="手机号">{{form.mobile}}</a-descriptions-item>
            <a-descriptions-item label="邮件">{{form.email}}</a-descriptions-item>
            <a-descriptions-item label="单位信息">{{form.unitName}}</a-descriptions-item>
            <a-descriptions-item label="申请时间">{{form.applyTime}}</a-descriptions-item>
            </a-descriptions>
        </div>
      </a-col>
      <a-col :span="12" v-if="show">
        <div class="user-product-content" v-if="productList.length>0">
          <div v-for="(item,index) in productList" :key="index">
            <selectDate :productDate="item.expire" :productTitle="item.name">
              <slot>
                <span></span>
              </slot>
            </selectDate>
          </div>
        </div>
        <div class="empty" style="margin-top:55px" v-else>
          <a-empty />
        </div>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
import selectDate from "components/base/selectDate";
import { user } from "@/api/user";
export default {
  components: {
    selectDate
  },
  props: {
    userDetailVisible: {
      type: Boolean,
      default: false
    },
    //关闭弹框
    closeFunc: {
      type: Function,
      default: () => {}
    },
    id: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      show:false,
      productList: [
        {
          expire: ["2020-08-03", "2020-08-17"],
          id: "111",
          indexUrl: "",
          name: "产品名称C",
          rootId: "",
          servicePath: ""
        }
      ],
      form:{
        loginName:'',
        mobile:'',
        email:'',
        unitName:'',
        applyTime:''
      }
    };
  },
  watch: {
    userDetailVisible() {
      this.getCommonMessage()
    }
  },
  methods: {
    //关闭弹框
    close() {
      this.$emit("closeFunc");
    },
    //获取普通用户信息
    getCommonMessage() {
      this.show = false
      user
        .UserDetail(this.id)
        .then(res => {
          this.form.applyTime = res.data.data.registerEntity.applyTime;
          this.form.email = res.data.data.registerEntity.email;
          this.form.loginName = res.data.data.registerEntity.loginName;
          this.form.mobile = res.data.data.registerEntity.mobile;
          this.form.unitName = res.data.data.registerEntity.unitName;
          this.productList = res.data.data.serviceList
          this.show = true
        })
        .catch(err => {
          this.$message.destroy();
          this.$message.error(err);
          this.form = {
            loginName:'',
            mobile:'',
            email:'',
            unitName:'',
            applyTime:''
          }
        })
        .finally(() => {});
    },
  }
};
</script>

<style lang="stylus" scoped>
.user-product-content {
  max-height: 400px;
  overflow: hidden;
  overflow-y: auto;
  padding-top 24px
}
</style>